<template>
	<div class="register-bg">
		<div class="register-content">
			<!-- logo -->
			<div class="logo">
				<img src="../assets/img/logo.png">
				<p>WU LIN</p>
			</div>
			
			<!-- 表单 -->
			<div class="form-content">
				<van-icon name="contact" color="#fff" size="20px"></van-icon>
				<input v-model="valName" type="text" placeholder="3-16位的字母数字" />
				<van-icon v-show="valName" @click="todie" class="cross" name="cross" color="#fff" size="20px"></van-icon>
				<span class="msg" v-show="msg" :style="{color: msg == '用户名可用' ? '#07c160' : 'orangered'}">{{msg}}</span>
			</div>
			
			<div class="form-content">
				<van-icon name="goods-collect-o" color="#fff" size="20px" />
				<input v-model="pwd" type="password" placeholder="6-12位的字母数字" />
				<span class="msg" style="color: orangered;" v-show="pwd">{{pwdMsg}}</span>
			</div>
			
			<!-- 注册按钮 -->
			<div class="register-btn">
				<van-button @click="registerBtn" block type="info" native-type="submit" color="#07c160">注册登客</van-button>
			</div>
			
			<div class="agreement">登录即表示您同意<a href="javascript:;">用户协议</a>和<a href="javascript:;">隐私政策</a></div>
			
		</div>
	</div>
</template>

<script>
	export default {	
		data(){
			return {
				username : '',
				password : '',
				autoLogin : true,
				valName : '',
				msg : '',
				
				//密码
				pwd : '',
				pwdMsg : '',
				
				//验证
				isUsername : false,
				isPwd : false,
			}
		},
		methods : {
			todie(){
				this.valName = '';
			},
			//点击注册
			registerBtn(){
				//验证
				if(!this.isUsername){
					//提示
					this.$toast({
						message : this.msg == '' ? '用户名不能为空' : this.msg,
						forbidClick : true,
						position : 'top',
					});
					return;
				};
				
				if(!this.isPwd){
					//提示
					this.$toast({
						message : this.pwdMsg == '' ? '密码不能为空' : this.pwdMsg + '的密码',
						forbidClick : true,
						position : 'top',
					});
					return;
				};
				
				//真的注册了
				this.axios.post('/api_user', this.qs.stringify({
					'status' : 'register',
					'username' : this.valName,
					'password' : this.pwd,
				})).then((result) => {
					let {data} = result;
					console.log(data);
					if(data.code != 0){
						console.log(data);
						return;
					};
					//跳转到登录
					//提示
					this.$toast.success({
						message : '注册成功,去登录',
						forbidClick : true,
					});
					setTimeout(() => {this.$router.push('/login')}, 2000);
				});
			}
		},
		watch:{
			// 监听账号
			valName(newVal){
				// 数据一发生变化就会验证后台用户名是否可用
				let datas = { status : 'check', username : 'newVal'};
				this.qs.stringify(datas);
				this.axios.post('/api_user', this.qs.stringify(datas))
				.then(result => {
					let {data} = result;
					if(data.code == 0){
						this.msg = data.message;
						this.isUsername = true;
					}else if(data.code == 1003){
						this.msg = '请输入3-20位字母、数字、下划线';
						this.isUsername = false;
					}else if(data.code == 1005){
						this.msg = data.message;
						this.isUsername = false;
					}else if(data.code == 1002){
						this.msg = '用户名不能为空';
						this.isUsername = false;
					}
				});
			},
			
			// 监听密码
			pwd(newVal){
				this.pwdMsg = '请输入6-12位数字';
				this.isPwd = false;
				if(newVal.length >= 6 && newVal.length <= 12){
					this.pwdMsg = '';
					this.isPwd = true;
				}
				
				console.log(this.isPwd);
			},
		}
	}
</script>

<style scoped lang="less">
	.register-bg{
		position: absolute;
		left: 0px; top:0px;
		z-index: 100;
		width:100%;
		height: 100%;
		background-image: url(../assets/img/bg3.png);
		
		&:after{
			content: '';
			position: absolute;
			left: 0px; top:0px; right: 0px; bottom: 0px;
			background-color: rgba(0,0,0,0.5);
		}
	}
	.register-content{
		position: absolute;
		left: 0px; top:0px;
		z-index: 101;
		width:100%;
		height: 100%;
		padding: 30px 12px;
		box-sizing: border-box;
		text-align: center;
		.logo{
			color: #fff;
			font-size: 14px;
			line-height: 20px;
			margin: 20px 0px 40px;
			img{
				width:24%;
				margin-bottom: 10px;
			}			
		}
		.cross{
		position:absolute;
		top:0px;
		left:290px;
		}
		
	}
	.form-content{
		text-align: left;
		margin: 40px 16px;
		padding: 0px 14px 10px;
		border-bottom: 1px solid #fff;
		display: flex;
		position: relative;
		input{
			outline: none;
			background: none;
			border: none;
			color: white;
			border-left: 1px solid #fff;
			margin-left: 14px;
			padding-left: 14px;
			font-size: 16px;
		}
		input::-webkit-input-placeholder{
			color: #ccc;
		}
		.msg{
			position: absolute;
			left: 60px; top:40px;
			font-size: 14px;
		}
	}
	.register-btn{
		padding: 30px 16px 0px;
	}
	.agreement{
		padding: 16px 16px;
		font-size: 13px;
		color: #ccc;
		margin-bottom: 40px;
		a{color:#07C160;}
	}
</style>
